<template>
	<sDialog v-model="visible" :closeOnClickModal="true" width="580rpx" bg="">
		<div class="preview-box flex">
			<div class="img-box">
				<img class="img" :class="{circle:radioType==1}" :src="img" alt="" />
			</div>
			<div class="btn-box">
				<button class="btn" @click="radioType = 1 - radioType">方形&nbsp;|&nbsp;圆形</button>
				<button class="btn download" @click="download">下载</button>
			</div>
		</div>
	</sDialog>
</template>
<script setup>
	import {
		computed,
		ref
	} from "vue";
	import sDialog from "/components/dialog/index.vue";

	const emit = defineEmits(["update:modelValue", "close", "change"]);

	const props = defineProps({
		modelValue: Boolean,
		img: String
	});

	const radioType = ref(0);

	const visible = computed({
		get() {
			return props.modelValue;
		},
		set(val) {
			emit("update:modelValue", val);
		},
	});

	const close = () => {
		visible.value = false;
	};

	const download = () => {
		const appAuthorizeSetting = uni.getAppAuthorizeSetting();
		if(appAuthorizeSetting.albumAuthorized == 'denied'){
			uni.showModal({
				title: '温馨提示',
				content: '检测到您未允许相册写入权限，请通过右上角胶囊打开设置页面勾选"添加到相册"哦',
				showCancel:'false',
				confirmText:"我知道了",
				success: function (res) {
					//
				}
			});
			return;
		}
		uni.getImageInfo({
			src: props.img,
			success: function(data) {
				uni.saveImageToPhotosAlbum({
					filePath: data.path,
					success: function() {
						uni.showToast({
							title: '下载成功',
							icon:"success",
							duration: 2000
						});
					}
				});
			}
		});
	}
</script>

<style scoped lang="scss">
	.preview-box {
		padding: 30rpx;
		color: #fff;

		.img-box {
			display: flex;
			justify-content: space-around;
			width: 520rpx;
			height: 520rpx;
			margin-bottom: 30rpx;

			.img {
				width: 100%;
				height: 100%;
				object-fit: scale-down;

				&.circle {
					border-radius: 50%;
				}
			}
		}

		.btn-box {
			display: flex;

			.btn {
				flex: 1;
				height: 66rpx;
				line-height: 66rpx;
				margin: 0;
				overflow: visible;
				outline: none;
				-webkit-appearance: none;
				-webkit-tap-highlight-color: transparent;
				font-size: 30rpx;
				font-weight: bold;
				border-radius: 0;
				border: 0;
				color: #fff;
				background: #00d1d1;
				border-radius: 66rpx;
				background: linear-gradient(90deg, #00d1d1, #9effbf);

				&::after {
					border: 0;
				}

				&.download {
					margin-left: 20rpx;
					background: linear-gradient(90deg, #f9bd31, #f9dd50);
				}
			}
		}
	}
</style>